<template>
	<div class="paper-content" @touchmove.prevent>
		<div v-if="show_guide" class="guide-mask" @click="hideGuide"></div>
		<img v-if="show_guide" class="guide-img" :src="guide_img" />
		<div v-if="downloadImg" class="blessing" id="download">
			<van-image width="100%" height="100%" :src="downloadImg" fit="scale-down"></van-image>
			<div v-if="navActive == 1 && blessing_text" class="blessing-text-box">
				<van-image 
					class="blessing-text" 
					width="100%"
					:src="blessing_text" 
					fit="scale-down">
				</van-image>
				<div v-show="username" class="username"> 
					{{username}} 
				</div>
			</div>
			<div v-if="navActive == 2" class="diy-wrap">
				<div class="box-wrap">
					<div class="left">
						<img class="qrcode" :src="qrcode" alt="">
					</div>
					<div class="right">
						<p class="diy-content">{{input_text}}</p>
						<p v-show="username" class="diy-name">{{username}}</p>
					</div>
				</div>
			</div>
			<!-- <div :class="navActive == 2 ? 'blessing-text-box add-bgurl':'blessing-text-box'">
				<div v-if="navActive == 2" class="textarea-input qr-wrap">
					<span class="diytext">{{input_text}}</span>
				</div>
				<van-image v-if="navActive == 1 && blessing_text" class="blessing-text" width="100%"
					:src="blessing_text" fit="scale-down">
				</van-image>
				<div v-if="username" class="username">
					{{username}}
				</div>
			</div> -->
			<!-- <van-image class="logo" :src="logo"></van-image> -->
		</div>
		<div class="popup" v-if="show_box">
			<div class="popup-tab">
				<img class="popup-tab-item" width="90" height="30" v-for="item in tabList" :key="item.id"
					@click="toggleNav(item.id)" :src="navActive == item.id ? item.acimg: item.img" />
				<img class="preview" width="65" height="30" @click="showInputBox(false)" :src="preview" />
			</div>
			<div class="popup-content">
				<div v-if="navActive == 1" class="popup-content-default">
					<div :class="currentIndex == item.id ? 'popup-content-default-item active':'popup-content-default-item'"
						v-for="item in textList" :key="item.id" @click="setBlessing(item.id)">
						{{item.text}}
					</div>
				</div>
				<van-field v-if="navActive == 2" class="input-text" v-model="input_text" rows="2" autosize
					type="textarea" maxlength="20" placeholder="请输入留言" show-word-limit
					@focus="onFocusEvent" @blur="onBlurEvent" />
				<div class="username">
					<span class="input-username-desc">你的名字</span>
					<van-field class="input-username" maxlength="5" @focus="onFocusEvent" @blur="onBlurEvent"
						v-model="username" />
				</div>
			</div>
		</div>
		<van-image v-else class="show-preview" @click="showInputBox(true)" width="70" height="22" :src="show_preview">
		</van-image>
		<div class="next-button">
			<van-image v-if="show_next_button" @click="checkNameAndText" width="130" height="30" :src="next_button"
				fit="scale-down"></van-image>
		</div>

		<div class="wait" v-if="show_wait">
			<img class="wait-mouse" src="http://h5static.weiyoho.com/assets/theme/mouse.png" />
			<div class="tip">客官稍等，马上就好</div>
			<!-- <img class="wait-text" src="http://h5static.weiyoho.com/assets/share/text.png" /> -->
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		Image,
		Toast,
		Button,
		Field
	} from "vant";
	import html2canvas from "html2canvas"
	export default {
		name: "blessing",
		components: {
			[Image.name]: Image,
			[Button.name]: Button,
			[Field.name]: Field,
			[Toast.name]: Toast,
		},
		data() {
			return {
				downloadUrl: '',
				show_box: true,
				show_wait: false,
				username: '',
				blessing_text: '',
				input_text: '',
				currentIndex: 1,
				navActive: 1,
				show_next_button: true,
				show_guide: true,
				qr_bg: require('../assets/paper/input-box.png'),
				qrcode: require('../assets/paper/qrcode.png'),
				logo: 'http://h5static.weiyoho.com/assets/picture/logo.png',
				guide_img: 'http://h5static.weiyoho.com/assets/guide-2.png',
				next_button: 'http://h5static.weiyoho.com/assets/paper/finish.png',
				preview: 'http://h5static.weiyoho.com/assets/paper/preview.png',
				show_preview: 'http://h5static.weiyoho.com/assets/paper/show-preview.png',
				tabList: [{
						id: 1,
						img: 'http://h5static.weiyoho.com/assets/paper/one.png',
						acimg: 'http://h5static.weiyoho.com/assets/paper/one-sel.png'
					},
					{
						id: 2,
						img: 'http://h5static.weiyoho.com/assets/paper/diy.png',
						acimg: 'http://h5static.weiyoho.com/assets/paper/diy-sel.png'
					}
				],
				textList: [{
						id: 1,
						text: '财源滚滚事业旺 ',
					},
					{
						id: 2,
						text: '大吉大利喜气扬',
					},
					{
						id: 3,
						text: '多吃不胖烦恼全消',
					},
					{
						id: 4,
						text: '工作顺利升职加薪',
					},
					{
						id: 5,
						text: '特别能挣日进斗金',
					},
					{
						id: 6,
						text: '身体健康平平安安',
					},
				],
				paperDefaultText: [{
						id: 1,
						img: require('../assets/paper/default-text-1.png'),
					},
					{
						id: 2,
						img: require('../assets/paper/default-text-2.png'),
					},
					{
						id: 3,
						img: require('../assets/paper/default-text-3.png'),
					},
					{
						id: 4,
						img: require('../assets/paper/default-text-4.png'),
					},
					{
						id: 5,
						img: require('../assets/paper/default-text-5.png'),
					},
					{
						id: 6,
						img: require('../assets/paper/default-text-6.png'),
					}
				]
			};
		},
		computed: {
			...mapState({
				downloadImg: state => state.downloadImg
			})
		},
		mounted() {
			this.blessing_text = this.paperDefaultText[0].img;
			localStorage.getItem("PAPER_BLESSING") ? this.show_guide = false : localStorage.setItem("PAPER_BLESSING", 1);
		},
		methods: {
			onDownloadPic() {
				this.show_wait = true
				html2canvas(document.querySelector("#download"), {
					useCORS: true,
					backgroundColor: null
					// scale: 5,
				}).then(canvas => {
					this.downloadUrl = canvas.toDataURL("image/jpeg");
					// localStorage.setItem("CANVAS_IMAGE", this.downloadUrl);
					this.$store.commit("updateDownloadImg", this.downloadUrl);
					this.uploadImg(this.downloadUrl)
					// this.$router.push({ name: 'share', params: { id: 3, downloadImg: this.downloadUrl }});
				});
			},
			uploadImg(imgurl) {
				this.$http({
					method: 'post',
					url: 'http://h5shu.weiyoho.com',
					data: { //这里是发送给后台的数据
						img: imgurl
					}
				}).then((response) => { //这里使用了ES6的语法
					let url = '/share?id=3&downloadImg=' + response.data.url
					this.$store.commit("updateShowWaiting", false)
					this.$router.replace(url)
				})
			},
			onBlurEvent() {
				setTimeout(function () {
					let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
					window.scrollTo(0, Math.max(scrollHeight - 1, 0));
				}, 100);
				this.show_next_button = true
			},
			onFocusEvent() {
				this.show_next_button = false
			},
			toggleNav(index) {
				this.navActive = index
				this.currentIndex = 1
			},
			setBlessing(index) {
				this.currentIndex = index
				this.blessing_text = this.paperDefaultText[--index].img;
			},
			showInputBox(flag) {
				this.show_box = flag;
			},
			checkNameAndText() {
				if (this.navActive == 2 && !this.input_text) {
					Toast('请选择文案或输入你的祝福');
					return
				}
				if (!this.username) {
					Toast('请输入你的名字');
					return
				}
				this.onDownloadPic()
			},
			hideGuide() {
				this.show_guide = false
			},
			/**
			 * @desc 跳转页面
			 */
			// pageTo(url){
			// 	this.onDownloadPic();
			// 	this.$router.push(url)
			// }
		},

	}
</script>

<style lang="less" scoped="scoped">
	.paper-content {
		.guide-mask {
			width: 100vw;
			height: 100vh;
			position: absolute;
			background-color: #000000;
			opacity: 0.7;
			top: 0;
			left: 0;
			z-index: 999;
		}

		.guide-img {
			position: absolute;
			top: 10vh;
			left: 10%;
			width: 200px;
			z-index: 999;
		}

		.popup {
			position: absolute;
			width: 90%;
			top: 20vh;
			left: 5%;

			&-tab {
				position: position;
				width: 100%;
				left: 0;
				bottom: 0;
				display: flex;

				&-button {
					width: 70px !important;
					border: 0;
					margin: 0;
					color: #b62431;
					background-color: #fff5ec;
					font-weight: 600;
				}
			}

			&-content {
				background: url(../assets/paper/box.png) no-repeat;
				background-size: 100% 100%;
				position: relative;
				width: 100%;
				padding: 15px;
				box-sizing: border-box;

				&-default {
					background-color: #ffffff;
					border: 2px solid #b62431;
					text-align: left;
					padding: 0 10px;
					border-radius: 10px;
					font-size: 14px;
					min-height: 70px;
					// max-height: 150px;
					overflow: scroll;

					&-item {
						margin: 10px;
					}
				}
			}

			.username {
				margin-top: 10px;
				display: flex;
				justify-content: center;

				.input-username {
					border: 2px solid #b62431;
					margin-left: 10px;
					border-radius: 5px;
					width: 100px;
					padding: 0 5px;
				}
			}

			.input-text {
				border: 2px solid #b62431;
				border-radius: 5px;
			}

			.blessing-text {
				margin-left: 20px;
			}
		}

		.active {
			color: #b62431;
		}

		.preview {
			position: absolute;
			right: 0;
			top: -5px;
			margin-top: 7px;
		}

		.show-preview {
			position: absolute;
			right: 10px;
			bottom: 10px;
			z-index: 999;
			-webkit-animation: show-preview-ani 3s ease-in-out infinite;
		}

		.blessing {
			width: 100vw;
			height: 100vh;
			overflow: hidden;

			.logo {
				position: absolute;
				width: 100px;
				left: 40%;
				bottom: 1vh;
				z-index: 1;
			}

			&-box {
				position: absolute;
				min-height: 30%;
				width: 70%;
				top: 25%;
				left: 10%;
				padding: 20px;
				background-color: #ffffff;

				.input-username-desc {
					border: 1px solid #000000;
					padding: 1px;
				}

				.input-username {
					border: 1px solid #000000;
					width: 100px;
					margin-left: 20px;
				}

				.input-text {
					border: 1px solid #000000;
				}
			}

			&-text-box {
				position: absolute;
				left: 10%;
				bottom: 3vh;
				width: 80%;
				min-height: 13%;
				font-size: 14px;
				box-sizing: border-box;

				.username {
					position: relative;
					top: -27px;
					text-align: right !important;
					font-size: 13px;
					font-weight: 500;
					color:#b62431;
					text-decoration: underline;
					// letter-spacing: 1px;
					margin-right: 11px;
				}
			}

			.diy-wrap {
			position: absolute;
			bottom: 7vh;
			display: flex;
			justify-content: center;
			width: 100%;
			min-height: 78px;
			box-sizing: border-box;
			// border: 1px solid red;

			.box-wrap {
				display: flex;
				// flex-direction: row-reverse;
				align-items: flex-start;
				width: 80%;
				min-height: 78px;
				// border: 2px solid black;
				background: #ffe8d6;
				padding: 10px 10px 0 10px;
				border-radius: 8px;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				p {
					margin: 0;
				}
				.left {
					// width: 49px;
					// height: 78px;
					.qrcode {
						width: 59px;
						height: 50px;
					}
				}
				.right {
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					padding: 0 5px;
					min-height: 55px;
					box-sizing: border-box;

					.diy-content {
						font-size: 14px;
						color:#b62431;
					}
					.diy-name {
						display: flex;
						justify-content: flex-end;
						padding-right: 5px;
						font-size: 13px;
						font-weight: 500;
						color: #b62431;
						text-decoration: underline;
					}
				}
			}
		}
		}

		.next-button {
			display: flex;
			justify-content: center;
			position: absolute;
			width: 100%;
			// left: 35%;
			bottom: 1vh;
			z-index: 3;
		}

		.add-bgurl {
			background: url(../assets/paper/input-box.png) no-repeat;
			background-size: 330px 70px;
			bottom: 6vh;
			width: 80% !important;
			left: 10%;

			.username {
				position: relative;
				top: -2px;
				text-align: right !important;
				color: #b62431;
				// transform: translateX(60px);
			}
		}

		.textarea-input {
			max-width: 70%;
			padding-top: 12px;
			color: #b62431;
			transform: translateX(70px);
		}

		// .qr-wrap {
		// 	width: 100%;
		// 	height: 68px;
		// 	display: flex;
		// 	justify-content: center;
		// 	margin-bottom: 3vh;

		// 	.qr-item {
		// 		position: relative;
		// 		width: 100%;
		// 		height: 68px;

		// 		.qr_bg {
		// 			position: absolute;
		// 			top: 0;
		// 			left: 0;
		// 			right: 0;
		// 			bottom: 0;
		// 			width: 100%;
		// 			height: 68px;
		// 		}
		// 		.diytext {
		// 			position: absolute;
		// 			top: 0px;
		// 			text-align: right !important;
		// 			color: #b62431;
		// 			z-index: 99;
		// 		}
		// 	}
		// }

		.wait {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100vw;
			height: 100vh;
			background: url(../assets/theme/bg.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			z-index: 999;

			.tip {
				position: absolute;
				top: 300px;
				font-size: 22px;
				color: #fff;
			}

			&-mouse {
				position: absolute;
				top: 150px;
				width: 100px;
				-webkit-animation: mouse-down-up-ani 2s ease-in-out infinite;
			}

			&-text {
				position: absolute;
				top: 300px;
				width: 200px;
			}
		}
	}

	@keyframes show-preview-ani {

		0%,
		50% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		25%,
		75% {
			transform: scale(1.03);
			/*放大1.1倍*/
		}
	}
</style>